<template>
  <div class="header_box flex_Level_sb_VerticalCenter">
    <div class="title">浙江工汇劳务派遣有限公司</div>
    <div class="flex_Level_VerticalCenter" style="height: 100%">
      <div class="item_box flex_LevelVertical_center" :class="{ active: item.code == menu.headerActive }" v-for="(item, index) in menu.menuList" :key="index" @click="jump(item)">{{ item.text }}</div>
    </div>
    <div class="flex_Level_VerticalCenter" style="height: 100%">
      <div class="panel_entry" @click="jumpPanel">数据驾驶舱</div>
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          欢迎您，admin<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="exit">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'
import { menuStore } from '@/store'
import { useRouter } from 'vue-router'
const menu = menuStore()
const router = useRouter()

// 切换 tab
const jump = (item: any) => {
  if (item.children.length > 0 && item.code !== '2') {
    router.push(item.children[0].path)
  } else {
    router.push(item.path)
  }
}

// 跳转数据驾驶舱
const jumpPanel = () => {
  window.open('https://baidu.com/')
}

// 下拉菜单
const handleCommand = (command: string) => {
  if (command == 'exit') {
    ElMessageBox.confirm('确定退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      window.sessionStorage.clear()
      window.location.replace(`${window.location.origin}/login`)
      ElMessage({ type: 'success', message: '退出登录成功' })
    }).catch(() => {
      ElMessage({ type: 'info', message: '已取消退出登录' })
    })
  }
}
</script>

<style scoped lang="scss">
.header_box {
  width: 100%;
  height: 100%;
  color: #ffffff;

  .title {
    font-size: 22px;
  }

  .item_box {
    height: 100%;
    padding: 0 16px;
    cursor: pointer;

    &:hover {
      color: $color;
    }
  }

  .active {
    color: $color;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 4px;
      background-color: $color;
      border-radius: 4px 4px 0 0;
    }
  }

  .panel_entry {
    border: 1px solid #ffffff;
    padding: 10px 30px;
    margin-right: 40px;
    border-radius: 6px;
    cursor: pointer;

    &:hover {
      color: $color;
      border: 1px solid $color;
    }

    &:active {
      background-color: rgba($color: #ffffff, $alpha: 0.2);
    }
  }

  ::v-deep(.el-dropdown) {
    height: 80%;
    color: #ffffff;

    .el-dropdown-link {
      height: 100%;
      cursor: pointer;
      display: flex;
      align-items: center;
    }
  }
}
</style>
